<template>
    <div>

        <h1>轮播图列表</h1>
        <el-table  v-loading="Loading" :data="swirliest" style="width: 100%">
            <el-table-column prop="bannerid" label="轮播图编号" width="180" />
            <el-table-column label="图片" width="180">
                <template #default="scope">
                    <img class="img" :src="scope.row.img" />
                </template>
            </el-table-column>
            <el-table-column prop="alt" label="图片提示" />
            <el-table-column prop="link" label="图片连接" />
            <el-table-column prop="flag" label="是否启用">
                <template #default="scope">
                    <el-switch v-model="scope.row.flag"
                        @change="(val: boolean) => updateBannerFlag(scope.row.bannerid, val)" />
                </template>

            </el-table-column>
            <el-table-column prop="link" label="操作">
                <template #default="scope">
                    <el-popconfirm title="亲，您真的要删除吗?" @confirm="deleteBannner(scope.row.bannerid)">
                        <template #reference>
                            <el-button>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
            



        </el-table>
    </div>
</template>

<script setup lang="ts">
import { Loading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import {ref, reactive } from 'vue'
import { loadRouteLocation } from 'vue-router';
import service from "../../../utils/service";
const Loading=ref(true)

interface swapper {
    link: string,
    img: string,
    alt: string,
    bannerid: string,
    flag: boolean,
}
let swirliest = reactive<swapper[]>([]);



const getBannerList = () => {
    service({
        url: "/banner/list"
    })
        .then((res: any) => {
            if (res.data.code === "200") {
                // bannerList = res.data.data;
                swirliest.push(...res.data.data);
                Loading.value=false
            }
        })

}
const updateBannerFlag = (bannerid: string, val: boolean) => {
    service({
        url: "/banner/updateFlag",
        method: 'post',
        data: {
            bannerid: bannerid,
            flag: val
        }
    }).then(res => {
        if (res.data.code === "200") {

        }
    })
}
const deleteBannner = (bannerid: string) => {
    service({
        url: "/banner/delete",
        method: "get",
        params: {
            bannerid,
        }
    }).then(res => {
        if (res.data.code === "200") {
            ElMessage({
                message: '删除成功！',
                type: 'success',
            })
            let index = swirliest.findIndex(item => item.bannerid === bannerid);
            swirliest.splice(index, 1);
        }
    })
}
const deleteAllBannner = (bannerid: string) => {
    service({
        url: "/banner/removeAll",
        method: "get",

    }).then(res => {
        if (res.data.code === "200") {
            ElMessage({
                message: '全部删除成功！',
                type: 'success',
            })
           
            getBannerList();

        }
    })
}
getBannerList();





</script>

<style scoped>
.img {
    width: 200px;
    height: 150px;
}
</style>